<style lang="scss" scoped>
.charts{
    width: 100%;
    height: 260px;
}
.evaluation {
    height: 258px;
    overflow-y:scroll;
    img{
        vertical-align: middle;
    }
}
.avatar{
    width: 34px;
    height: 34px;
    border-radius: 50%;
}
</style>
<template>
    <div class="center">
        <div class="info color-fff">
            <h4>{{username}}老师您好</h4>
            <p>您当前平均整体评价分为
                 <Rate v-if="evaluationChartsData.length" :allow-half="evaluationChartsData[0].data['整体评价']%1>=0.5" disabled v-model="evaluationChartsData[0].data['整体评价']" />
                ，请继续努力。
            </p>
        </div>
        <div class="py-2 my-1">
            <h4 class="block-title">评价趋势图</h4>
            <div class="charts mt-1" style="width:1100px">
                <line-charts class="charts" v-if="showCharts" :attrs="evaluationChartsAttrs" :data="evaluationChartsData"/>
            </div>
        </div>
        <div class="mt-2 p-1 color-fff">
            <h3>评价留言</h3>
            <div class="evaluation">
                <div class="list pl-3 mt-1">
                    <div class="item" v-for="(val,key) in evaluationTexts" :key="key">
                        <h4 class="block-title">{{key}}</h4>
                        <div class="my-1 pl-3" v-for="(v,i) in val" :key="i">
                            <img :src="avatar" class="avatar mr-1">
                            <span>{{v}}</span>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</template>

<script>
import echarts from 'echarts'
import {getRandom} from '@/common/tool'
import {evaluation} from '@/common/tapi'
import lineCharts from "@/components/lineCharts"
export default {
    data(){
        return {
            username:'',
            showCharts:false,
            getRandom,
            evaluationScore:3.5,
            evaluationChartsData:[],
            evaluationTexts:{},
            evaluationChartsAttrs:{
                grid:{
                    left:50,
                    bottom:30
                },
                series:[{
                    color:'#a8edea',
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#a8edea'
                        }, {
                            offset: 1,
                            color: '#fff'
                        }])
                    },
                }]
            },
            avatar:require('@/assets/avatar.jpg')
        }
    },
    components:{
        lineCharts,
    },
    created(){
        this.username=JSON.parse(localStorage.getItem('userinfo')).name
        evaluation()
        .then(res=>{
            if(res){
                this.evaluationChartsData=[{
                    name:'平均评价分',
                    data:res.data.trend
                }]
                this.showCharts=true
                res.data.evaluations.forEach(el => {
                    if(!Array.isArray(this.evaluationTexts[el.lessons.title]))
                        this.evaluationTexts[el.lessons.title]=[]
                    this.evaluationTexts[el.lessons.title].push(el.remark)  
                });
            }
        })
    
    }
}
</script>

